<template>
  <div class="page">
    <div class="title-box">密码修改</div>
    <Form class="Form" :validation-schema="mySchema" v-slot="{errors}" ref="FormRef">

      <div class="Form-item">
        <span>旧密码：</span>
        <Field type="password" v-model="old" name="password" />

        <div class="errmessage" v-if="errors.password">
        <i class="iconfont errmessage">&#xe66c;</i> {{ errors.password }}</div>
      </div>

      <div class="Form-item">
        <span>新密码：</span>
        <Field type="password" v-model="new1" name="newPassword1" @blur="checkPassword()"/>

        <div class="errmessage" v-if="errors.newPassword1">
        <i class="iconfont errmessage">&#xe66c;</i> {{ errors.newPassword1 }}</div>
      </div>

      <div class="Form-item">
        <span>确认新：</span>
        <!-- 单独设置监视两次新密码是否一致 -->
        <Field type="password" v-model="new2" name="newPassword2" @blur="checkPassword()"/>

        <div class="errmessage" v-if="errors.newPassword2">
        <i class="iconfont errmessage">&#xe66c;</i> {{ errors.newPassword2 }}</div>
        <div class="errmessage" v-else-if="!flag">
        <i class="iconfont errmessage">&#xe66c;</i> 两次密码输入不一致，请重新确认</div>
      </div>

      <div class="Form-item">
        <button type="button" @click="submitPassword()">修改</button>
      </div>
    </Form>
  </div>
</template>
<script>
import { reactive, ref } from 'vue'
// 添加表单验证所需要的那些组件
import { Form, Field } from 'vee-validate'
import veeSchema from '@/utils/vee-validate-schema'
// 修改密码所需要调用的方法
import { changePassword } from '@/api/user'
// 消息提示组件
import popmessage from '@/components/library/message'
export default {
  name: 'user-edit',
  components: {
    Form,
    Field
  },
  data () {
    return {
      new1: ref(null),
      new2: ref(null),
      flag: ref(true)
    }
  },
  methods: {
    checkPassword () {
      if (this.new1 === this.new2) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    submitPassword () {
      const oldPassword = this.old
      const newPassword = this.new2
      console.log({ oldPassword, newPassword })
      this.$refs.FormRef.validate().then(res => {
        // console.log(res.valid)
        // 假如表单验证成功 以及我吗自定义的密码验证成功就发送请求
        if (res.valid && this.flag) {
          // console.log('表单验证成功')
          changePassword({ oldPassword, newPassword }).then(res => {
            if (res.data.status === 0) {
              popmessage({ type: 'success', str: '修改密码成功！' })
            } else {
              popmessage({ type: 'error', str: res.data.message })
            }
          })
        } else {
          console.log('验证失败')
        }
      })
    }
  },
  setup () {
    const FormRef = ref(null)
    const mySchema = reactive({
      password: veeSchema.password,
      newPassword1: veeSchema.newPassword1,
      newPassword2: veeSchema.newPassword2
    })
    const old = ref(null)
    return { mySchema, FormRef, old }
  }
}
</script>
<style scoped lang="less">
.page{
  border :1px solid #e9e9e9;
  margin-left: 20px;
  width: 100%;
  background: white;
  .title-box{
    width: 100%;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    text-indent: 10%;
    font-family: '钉钉进步体';
    color: #6c6c6c;
    border-bottom: 1px solid #e9e9e9;
  }
  .Form{
    width: 1000px;
    display: flex;
    flex-direction: column;
    padding-left: 10%;
    padding-top: 20px;
    input{
      background-color: #f0f0f0;
      outline-style: none;
      border: none;
      padding: 7px 0px;
    }
    .Form-item{
      height: 60px;
      margin-top: 10px;
      button{
        cursor: pointer;
        border: none;
        height: 40px;
        width: 100px;
        &:active{
          background-color: #bdbdbd;
        }
      }
    }
  }
}

.errmessage /deep/{
  margin-left: 36px;
  color: rgb(255, 88, 88);
}
.success /deep/{
  color: rgb(137, 244, 137);
}
</style>
